<template>
  <div>
    <div class="websiteEditorElem" style="background: #ffffff;"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import api from '@/api/banner'

const baseApi = process.env.VUE_APP_API_BASE_URL

export default {
  name: 'WangEditor',
  props: ['content'],
  data () {
    return {
      uploadApi: baseApi + api.upload,
      phoneEditor: '',
      name: ''
    }
  },
  methods: {
    wangEditorReset (item) {
      console.log(item)
      this.phoneEditor.txt.html(item)
    }
  },
  beforeDestroy () {
    // 销毁编辑器实例，释放资源
    if (this.phoneEditor) {
      this.phoneEditor.destroy()
    }
  },
  mounted () {
    this.phoneEditor = new E('.websiteEditorElem')
    // 上传图片到服务器，base64形式
    this.phoneEditor.config.uploadImgShowBase64 = true
    // // 隐藏网络图片 
    this.phoneEditor.config.showLinkImg = false
    this.phoneEditor.config.uploadImgTimeout = 600 * 1000
    
    // 图片上传大小限制，2024年11月16日22:09:59
		this.phoneEditor.config.uploadImgMaxSize = 50 * 1024 * 1024

    this.phoneEditor.config.debug = true
    // 图片上传接口
    this.phoneEditor.config.uploadImgServer = this.uploadApi // 上传图片的接口地址
    this.phoneEditor.config.uploadVideoServer = this.uploadApi
    this.phoneEditor.config.uploadFileName = 'file' // formdata中的name属性，比如现在是将图片image加入到formdate，后台从image中接收到图片数据
    this.phoneEditor.config.uploadImgHooks = {
      customInsert: function (insertImg, result, editor) {
        insertImg(result.data.src)
      }
    }
    // 创建一个富文本编辑器
    this.phoneEditor.create()
    // 修改的时候，需要富文本内容回显，则需要加入以下代码
    this.phoneEditor.txt.html(this.content)

    this.phoneEditor.config.onchange = (html) => {
      this.info_ = html // 绑定当前逐渐地值
      this.$emit('change', this.info_) // 将内容同步到父组件中
    }
  }
}
</script>
